<template>
	<div>
		<van-index-bar>
			<div v-for="(v, i) in cityList" :key="i"> 
				<van-index-anchor :index="v.pinyin"/>
				<van-cell v-for="(item, index) in v.children" :key="index"
					:icon="item.image_url"
					size="large"
					@click="openPopup"
				>
					<span>{{ item.brand_name }}</span>
				</van-cell>
			</div>
		</van-index-bar>

		<van-popup v-model="show" position="right">
			<van-cell v-for="v in list" :key="v.id"
				:icon="v.url"
				@click="toCarInfo(v.id)"
			>
				<h3>{{ v.title }}</h3>
			</van-cell>
		</van-popup>
	</div>
</template>

<script>
import { SET_CITY_LIST, SET_LIST } from '../../../store'
export default {
	data() {
		return {
			show: false
		}
	},
	computed: {
		cityList() {
			return this.$store.state.cityList
		},
		list() {
			return this.$store.state.list
		}
	},
	methods: {
		openPopup() {
			this.show = true
			this.$store.dispatch(SET_LIST)
		},
		toCarInfo(id) {
			// this.$router.push({ path: `/car/info/${id}` })
			this.$router.push({ name: 'carInfo', params: { id } })
		}
	},
	created() {
		this.$store.dispatch(SET_CITY_LIST)
	}
}
</script>


<style lang="scss" scoped>
.van-icon{
	font-size: 32px;
}
</style>
